<template>
	<view class="big_box">
		<u-navbar title="我的订单" :autoBack="true"></u-navbar>
		<!-- <view class="tab">
				<u-tabs :list="tabsList"  :current="currentTab" @click="tabChange" active-color="#7dc5eb" inactive-color="#606266" font-size="34" lineColor='#7dc5eb' ></u-tabs>
		</view> -->
		<!-- 订单状态选项卡 -->
		<view class="order-list">
			<!-- 订单列表 -->
			<view class="order-item" v-for="item in orderList" :key="item.id">
				<view class="order-header">
					<text class="order-no">订单编号：{{item.order_sn}}</text>
					<text class="order-status" :style="{color:getStatusColor(item.status_name)}">
						{{item.status_name}}
					</text>
				</view>
				
				<view class="order-content" @click="goToGroupDetail(item)">
					<image class="group-avatar" :src="item.qun_image" mode="aspectFill"></image>
					<view class="group-info">
						<view class="group-name">{{item.qun_name}}</view>
						<view class="group-desc">{{item.qun_descript}}</view>
						<view class="group-price">
							<text class="price">¥{{item.money}}</text>
							<text class="quantity" v-if="item.status_name!='待支付'">时间:{{item.pay_time}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<u-empty v-if="orderList.length === 0" mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js'
	export default {
		data() {
			return {
				currentTab: 0,
				tabsList: [
					{name: '全部'},
					{name: '待付款'},
					{name: '已付款'},
					{name: '已过期'}
				],
				orderList: [
					// {
					// 	id: 1,
					// 	orderNo: 'DD20230615123456',
					// 	groupId: 101,
					// 	groupName: '河北石家庄搭子群',
					// 	groupDesc: '优质单身青年聚集地，每周线下活动',
					// 	groupAvatar: '/static/group/group1.jpg',
					// 	price: 9.9,
					// 	quantity: 1,
					// 	createTime: '2023-06-15 14:30:22',
					// 	status: 0 // 0待支付 1已支付 2已取消 3已过期
					// },
					// {
					// 	id: 2,
					// 	orderNo: 'DD20230615112233',
					// 	groupId: 102,
					// 	groupName: '河北石家庄搭子群',
					// 	groupDesc: '每月共读一本书，线下读书分享会',
					// 	groupAvatar: '/static/group/group2.jpg',
					// 	price: 19.9,
					// 	quantity: 1,
					// 	createTime: '2023-06-10 09:15:45',
					// 	status: 1
					// },
					// {
					// 	id: 3,
					// 	orderNo: 'DD20230608112233',
					// 	groupId: 103,
					// 	groupName: '河北石家庄搭子群',
					// 	groupDesc: '王者/LOL/吃鸡组队开黑',
					// 	groupAvatar: '/static/group/group3.jpg',
					// 	price: 6.6,
					// 	quantity: 1,
					// 	createTime: '2023-05-20 18:30:12',
					// 	status: 3
					// }
				],
				page: 1,
			}
		},
		onLoad() {
			this.getOrderList();
		},
		methods: {
			// 切换订单状态tab
			tabChange(index) {
				console.log(index,'111');
				this.currentTab = index.index;
				// TODO: 根据index筛选对应状态的订单
			},
			//订单列表
			getOrderList() {
				api.getOrderList({
					page:this.page
				}).then(res => {
					if(res.response.statusCode==200){
						this.orderList=res.data.data.list
					}
				}).catch(err => {
					console.error(err)
				})
			},
			
			// 获取订单状态文本
			getStatusText(status) {
				const statusMap = {
					0: '待支付',
					1: '已支付',
					2: '已取消',
					3: '已过期'
				}
				return statusMap[status] || '未知状态';
			},
			
			// 获取订单状态颜色
			getStatusColor(status) {
				const colorMap = {
					'待支付': '#f56c6c',
					'已支付': '#67c23a',
					'已取消': '#909399',
					'已过期': '#e6a23c'
				}
				return colorMap[status] || '#909399';
			},
			
			// 取消订单
			cancelOrder(orderId) {
				uni.showModal({
					title: '提示',
					content: '确定要取消该订单吗？',
					success: (res) => {
						if (res.confirm) {
							// TODO: 调用取消订单接口
							uni.showToast({
								title: '订单已取消',
								icon: 'success'
							})
						}
					}
				})
			},
			
			// 支付订单
			payOrder(orderId) {
				// TODO: 调用支付接口
				uni.showToast({
					title: '跳转支付中...',
					icon: 'loading'
				})
			},
			
			// 进入群聊
			goToGroup(groupId) {
				uni.navigateTo({
					url: `/pages/group/chat?id=${groupId}`
				})
			},
			
			// 查看群详情
			viewGroupDetail(groupId) {
				uni.navigateTo({
					url: `/pages/group/detail?id=${groupId}`
				})
			},
			
			// 申请退款
			refundOrder(orderId) {
				uni.navigateTo({
					url: `/pages/order/refund?id=${orderId}`
				})
			},
			
			// 跳转群聊详情
			goToGroupDetail(item) {
				console.log(item,'wwwww');
				let item1={
					id:item.qun_id,
					name:item.qun_name,
					image:item.qun_image,
					price:item.money
				}
				uni.navigateTo({
					url: '/pages/index/pay?data=' + JSON.stringify(item1)
				})
			}
		}
	}
</script>
<style>
	::v-deep .u-tabs__wrapper__nav__item {
		padding: 0 25px !important;
	}
</style>
<style lang="scss" scoped>
	
	.big_box {
		padding: 20rpx;
		background-color: #f7f7f7;
		min-height: 100vh;
	}
	.tab{
		margin-top: 3rem;
	}
	
	.order-list {
		margin-top: 80rpx;
	}
	
	.order-item {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
		
		.order-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f1f1f1;
			
			.order-no {
				font-size: 26rpx;
				color: #909399;
			}
			
			.order-status {
				font-size: 28rpx;
				font-weight: 500;
			}
		}
		
		.order-content {
			display: flex;
			padding: 20rpx 0;
			
			.group-avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}
			
			.group-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.group-name {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
					
				}
				
				.group-desc {
					font-size: 26rpx;
					color: #909399;
				
				}
				
				.group-price {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 10rpx;
					
					.price {
						font-size: 30rpx;
						color: #f56c6c;
						font-weight: 500;
					}
					
					.quantity {
						font-size: 26rpx;
						color: #909399;
					}
				}
			}
		}
		
		.order-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20rpx;
			border-top: 1rpx solid #f1f1f1;
			
			.order-time {
				font-size: 24rpx;
				color: #909399;
			}
			
			.action-buttons {
				display: flex;
				
				.u-button {
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
